<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <el-table
            :data="list"
            style="width: 100%"
             
            class="card-table"
            :border="false"
            stripe
            :default-sort="{prop: 'five'}"
          >
            <el-table-column
              show-overflow-tooltip
              type="index"
              label="序号"
              min-width="50"
              align="center"
            />

            <el-table-column
              show-overflow-tooltip
              label="服务类型"
              prop="serviceName"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <el-popover placement="top-start" title="" trigger="hover">
                          <img src="../../../assets/404_images/404.png" alt="" class="imh">
                          <img slot="reference" src="../../../assets/404_images/404.png" class="imt">

                        </el-popover> -->
                {{ scope.row.serviceName }}
                <!-- <router-link :to="{path: '', query:{}}" class="linkBtn">

                </router-link> -->
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="name"
              label="用户姓名"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="">
                  {{ scope.row.name || '--' }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="mobile"
              label="手机号码"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="createdTime"
              label="提交日期"
              align="center"
              :formatter="myTimeDian"
            />
            <el-table-column
              show-overflow-tooltip
              prop="status"
              label="状态"
              align="center"
              :formatter="rowFn"
            />
            <el-table-column
              show-overflow-tooltip
              prop="remark"
              label="跟进说明"
              align="center"
              width="300"
              :formatter="txtShow"
            />
            <el-table-column
              show-overflow-tooltip
              prop="adminName"
              label="沟通人"
              align="center"
              :formatter="adminNameShow"
            />
            <el-table-column
              show-overflow-tooltip
               
              label="操作"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <el-button v-if="scope.row.status == 0 " type="text" size="small" class="blueCfn" @click="handleClick(scope.row)">分配</el-button>
                <!-- <el-button type="text" size="small">取消</el-button>-->
                <el-button v-if="scope.row.status == 2 " type="text" size="small">--</el-button>
                <el-button v-if="scope.row.status == 1 " type="text" size="small" class="blueCfn" @click="handleClickGo(scope.row)">跟进</el-button>

              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :v-show="total > 0"
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>

    <!---->
    <myModal :obj="objMo" :disabled="disabled" @close="close" @save="save">
      <div class="mpdalBody">
        <p class="spanll">
          <span>服务类型 : {{ objMoData.serviceName }}</span>
          <span>用户姓名 : {{ objMoData.name ? objMoData.name:"--" }}</span>
          <span>手机号码 : {{ objMoData.mobile }}</span>
          <span>下单日期 : {{ objMoData.createdTime }}</span>
        </p>
        <p class="pClos">
          <!--multiple-->
          <i> 沟通人:</i>
          <el-select
            v-model="postForm.adminId"
            style="width:485px"
            filterable
            default-first-option
            placeholder="请选择沟通人"
          >
            <el-option
              v-for="item in BDListOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </p>
      </div>
    </myModal>
    <!---->
    <!--跟进-->
    <myModal :obj="objMoGo" :disabled="disabled" @close="close" @save="savegj">
      <div class="mpdalBody">
        <p class="spanll">
          <span>服务类型 : {{ objMoGoData.serviceName }}</span>
          <span>用户姓名 : {{ objMoGoData.name }}</span>
          <span>手机号码 : {{ objMoGoData.mobile }}</span>
          <span>提交日期 : {{ objMoGoData.createdTime }}</span>
          <span>沟通人   : {{ objMoGoData.adminName }}</span>
        </p>
        <p class="pClos">
          <i>沟通状态:</i>
          <el-select
            v-model="postForm.status"
            style="padding-left:-5px"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in BDListOptionsArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </p>
        <p class="pClos">
          <i>沟通说明:</i>
          <el-input v-model="postForm.remark" type="textarea" class="pTxt" placeholder="请输入..." />

        </p>
      </div>
    </myModal>
    <!---->
  </div>
</template>

<script>
import { page, getTblae, listByRole, tjByfp, tjBygj } from '@/api/serviceItem'
import myModal from '@/components/Modal'
import { string } from 'jszip/lib/support'
import { myTimeDian } from '@/utils/common'
export default {
  components: { myModal },
  props: {
    activeName: {
      type: String
    }
    // resoData:{
    //   type:Object
    // }
  },
  data() {
    return {
      disabled: true,
      myTimeDian,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      BDListOptionsArr: [{ id: 1, name: '未完成' }, { id: 2, name: '已完成' }],
      BDListOptions: [],
      objMoData: {
        name: ''
      },
      objMo: {
        show: false,
        title: '分配人员',
        width: '836px'
      },
      objMoGoData: {},
      objMoGo: {
        show: false,
        title: '服务需求跟进',
        width: '900px'
      },
      list: [],
      sizeForm: {},
      radio: 3,
      editForm: {},
      textarea: '',
      postForm: {
        id: ''
      }
    }
  },
  watch: {
    currentPage: {
      handler(newVal) {
        newVal && this.getList()
      }
    },
    pageSize: {
      handler(newVal) {
        newVal && this.getList()
      }
    },
    resoData: {
      handler(newVal) {
        this.list = newVal.data.records
        this.total = newVal.data.total
        this.loading = false
      }
    },
    postForm: {
      handler(newVal, oldVal) {
        if (newVal.adminId) {
          this.disabled = false
        }
        if (newVal.status) {
          this.disabled = false
        }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    txtShow(value) {
      if (value.remark == '') {
        return '--'
      } else {
        return value.remark
      }
    },
    adminNameShow(value) {
      if (value.adminName == '') {
        return '--'
      } else {
        return value.adminName
      }
    },
    savegj() {
      tjBygj(this.postForm).then(response => {
        if (response.code == 200) {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
          this.objMoGo.show = false
        }
      })
    },
    rowFn(e) {
      if (e.status == 0) {
        return '未分配'
      } else if (e.status == 1) {
        return '未完成'
      } else if (e.status == 2) {
        return '已完成'
      }
    },
    getList() {
      this.loading = true
      const query = { page: this.currentPage, limit: this.pageSize }
      getTblae(query).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
      listByRole(1).then(response => {
        if (!response.data) return
        this.BDListOptions = response.data
        // if (!this.isEdit && this.postForm.organizationId === '') {
        // this.postForm.organizationId = response.data[0].id
        // }
      })
    },
    getListSs(query) {
      this.loading = true
      //  const query = { page: this.currentPage, limit: this.pageSize }

      getTblae(query).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
      listByRole(1).then(response => {
        if (!response.data) return
        this.BDListOptions = response.data
        // if (!this.isEdit && this.postForm.organizationId === '') {
        // this.postForm.organizationId = response.data[0].id
        // }
      })
    },
    handleClick(item) {
      this.objMoData = item
      this.postForm.id = item.id
      this.objMo.show = true
    },
    handleClickGo(item) {
      this.objMoGoData = item
      this.postForm.id = item.id
      //  this.postForm.status = item.status
      this.objMoGo.show = true
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    close() {
      this.objMo.show = false
      this.objMoGo.show = false
      this.objMoGoData = {}
      this.disabled = true
    },
    save() {
      tjByfp(this.postForm).then(response => {
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
        this.objMo.show = false
        this.postForm = {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf, ::v-deep .el-table td,::v-deep .el-table__body{border: 0;}
::v-deep .el-table::before ,::v-deep .el-table__fixed-right::before{display: none;}
::v-deep  th{background: #f7f7f7;font-weight: normal;color: #101010;}
.imt{vertical-align: bottom;width: 30px;height: 30px}
.imh{width: 150px;height: 150px;vertical-align: bottom;}
.blueCfn{color: #5794FF;}
.spanll span{margin-right: 25px;}
.pClos{color:#101010;margin-top: 30px;font-weight: bold;display: flex;align-items: center;width: 100%;}
.pTxt{display: inline-block;}
.pClos i{display: block;width: 85px;}
.styleIn{width: 320px;margin-left:-8px}

</style>

<style lang="css">
.el-tooltip__popper{
white-space: pre-wrap;
    word-break: break-word;max-width:50% }
</style>
